<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <meta content="emai=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/css/group.css" />
    <title>精彩课堂</title>
    <style>
		/*Swiper Start*/
		.swiper-slide > img {
			display: inherit;
			width: 100%;
		}

		.swiper-pagination {
			width: 100%;
		}

		.swiper-pagination-bullet {
			background-color: #feed7a;
			border: 1px solid #000;
			-moz-background-clip: padding-box;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			opacity: 0.8;
		}

		.swiper-pagination-bullet-active {
			background-color: #fd8965;
		}
		/*Swiper End*/

		/*Tabs Start*/
		.nav-l {
			position: relative;
			background-color: #fff;
		}

			.nav-l ul {
				border-bottom: 1px solid #e2e2e2;
				background-color: #fff;
			}

			.nav-l li {
				font-size: 1.5rem;
				text-align: center;
				margin-top: 3px;
				padding: 15px 0;
			}

				.nav-l li a {
					border-left: 1px solid #e2e2e2;
					display: block;
					color: #2d2d2d;
					text-align: center;
				}

				.nav-l li:first-child a {
					border-left: none;
				}

				.nav-l li .icon {
					background-size: 100% auto;
					margin-bottom: 8px;
					width: 32px;
					height: 32px;
				}

		.icon.i-timetable {
			background: url('/img/icon_tt.png') no-repeat;
		}

		.icon.i-course {
			background: url('/img/icon_course.png') no-repeat;
		}

		.icon.i-live {
			background: url('/img/icon_live.png') no-repeat;
		}

		.icon.i-library {
			background: url('../img/icon_library.png') no-repeat;
			background-size: auto 90% !important;
			background-position: center center;
			width: 50px !important;
		}
		/*Tabs End*/
	</style>
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?19f39b206aedf768b42fbc69e4e4f721";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
</head>
<body>
    <div class="wrapper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
            	<?php if($banner_list):?>
            	<?php foreach ($banner_list as $banner):?>
                <div class="swiper-slide">
                    <img data-href="<?php echo $banner['link']?>" src="<?php echo STATIC_IMAGE . $banner['image']?>" alt="" />
                </div>
                <?php endforeach;?>
                <?php endif;?>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="nav-l">
			<ul class="flex-wrapper">
				<li class="flex-1"><a href="http://subscription.zhishimama.com/library"><span class="icon i-library"></span><br />图书馆</a></li>
				<li class="flex-1"><a href="http://m.qlchat.com/live/140000022004499.htm"><span class="icon i-live"></span><br />在直播</a></li>
				<li class="flex-1"><a href="/organization/timetable"><span class="icon i-timetable"></span><br />课程表</a></li>
			</ul>
		</div>
        <div class="g-list">
            <header data-href="/classroom">
                <span class="icon i-viewAll s-right"></span>课堂回顾
            </header>
            <?php if($list):?>
            <ul class="g-list-group">
            	<?php foreach ($list as $item):?>
                <li class="g-list-item" data-href="<?php echo $item['link']?>">
                    <div class="flex-wrapper flex-align-center">
                        <div class="g-list-left">
                            <span class="avatar">
                                <img src="<?php echo STATIC_IMAGE . $item['image']?>" />
                            </span>
                        </div>
                        <div class="g-list-right flex-1">
                            <p class="g-list-title">
                              <?php echo $item['title']?>
                            </p>
                            <p class="g-list-desc interception"><?php echo $item['content']?></p>
                        </div>
                    </div>
                </li>
                <?php endforeach;?>
            </ul>
            <?php endif;?>
        </div>
    </div>
    <script src="/js/zepto-1.1.6.js" type="text/javascript"></script>
    <script src="/js/lazyload.js" type="text/javascript"></script>
    <script src="/js/swiper.min.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script>
        $(function () {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                loop: true
            });
            resetSize($(".swiper-wrapper"));
        });
    </script>
</body>
</html>
